<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css">
</head>

<body>
    <ul id="demo">
        <li>1</li>
        <li>2</li>
        <li>6</li>
        <li>1</li>
        <li>2</li>
        <li>6</li>
        <li>1</li>
        <li>2</li>
        <li>6</li>
        <li>1</li>
        <li>2</li>
        <li>6</li>
        <li>1</li>
        <li>2</li>
        <li>6</li>

    </ul>
</body>

<script src="./assets/jquery/jquery-3.5.1.js"></script>
<script src="./assets/layui/layui.all.js"></script>

<script>
    layui.flow.load({
        elem: '#demo' //指定列表容器
            ,
        done: function(page, next) { //到达临界点（默认滚动触发），触发下一页
            var lis = [];
            //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
            $.get('/api/list?page=' + page, function(res) {
                //假设你的列表返回在data集合中
                layui.each(res.data, function(index, item) {
                    lis.push('<li>' + item.title + '</li>');
                });

                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                next(lis.join(''), page < res.pages);
            });
        }
    });
</script>

</html>